<template>

  <el-dialog
    title="配置车辆"
    :visible="showDialog"
    width="30%"
    :before-close="handleClose"
  >
    <!-- ====== -->
    <div class="background">
      <div class="fix">
        <div class="driver"><span style="color: #000000; margin-right: 10px;">司机编码:</span><span>{{ tableData.account }}</span></div>
        <div class="driver"><span style="color: #000000; margin-right: 10px;">司机名称:</span><span>{{ tableData.name }}</span></div>
        <div class="driver"><span style="color: #000000; margin-right: 10px;">司机电话:</span><span>{{ tableData.mobile }}</span></div>
        <div class="driver"><span style="color: #000000; margin-right: 10px;">所属机构:</span><span>{{ tableData.agency&& tableData.agency.name }}</span></div>
      </div>

      <div>
        <span style="font-weight: 700; font-size: 16px; margin-right: 10px;">配置车辆:</span>
        <el-select v-model="options.id" placeholder="请选择" medium @change="onOptions">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.licensePlate"
            :value="item.id"
          />
        </el-select>
      </div>

      <div>
        <el-table
          :data="newOptions"
          stripe
          style="width: 100% ;margin-top: 20px;"
        >
          <el-table-column
            prop="licensePlate"
            label="车牌号"
            width="180"
          />
          <el-table-column
            prop="workStatus"
            label="车辆状态"
            width="180"
          >
            <template v-slot="{row}">
              <span v-if="row.status===1"> <span class="dot" />可用</span>
              <span v-else> <span class="dot1" />停用</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="address"
            label="操作"
          >
            <template>
              <span style="color: #0093ff;" @click="look">查看</span>
              <span class="line">|</span>
              <span style="color: #ff5454;" @click="del">删除</span>
            </template>
          </el-table-column>

        </el-table>
      </div>

    </div>
    <!-- ====== -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </span>
  </el-dialog>

</template>

<script>
import { getDriverDetails, truckDetails, truckDrivers, unWorkingTrucks } from '@/api/driver'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    currentNodeId: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      newOptions: [], // 车牌表格列表
      tableData: [], // 司机列表
      options: [], // 车辆列表
      value: ''
    }
  },
  watch: {
    // 监听id有变化,再发请求
    currentNodeId() {
      this.getDriver()
    }

  },
  created() {
    this.vehicleList()
  },
  methods: {
    handleClose() {
      this.showDialog = false
    },
    // 车辆列表
    async vehicleList() {
      const res = await unWorkingTrucks()
      // console.log('车辆列表', res.data)
      this.options = res.data
      // console.log(this.currentNodeId)
    },
    // 数据司机列表
    async getDriver() {
      // eslint-disable-next-line no-undef
      const res = await getDriverDetails(BigInt(this.currentNodeId))
      // console.log('司机列表', res.data)
      this.tableData = res.data
    },
    // 车牌选择好的数据
    async onOptions(value) {
      this.getTruckDetails(value)
    },
    async getTruckDetails(id) {
      const res = await truckDetails(id)
      // console.log('车牌选择好的数据', res.data)
      this.newOptions = [res.data]
    },
    // 取消
    cancel() {
      this.showDialog = false
    },
    // 保存
    async confirm() {
      await truckDrivers(this.tableData, this.options.id)
      this.$message.success('保存成功')
      this.cancel()
    },
    // 查看
    look() {
      this.$router.push(this.$router.push({ path: '/transit/vehicle-detail', query: { id: this.options.id, formUrlName: '车辆管理' }}))
    },
    // 删除
    del() {
      this.newOptions = []
      this.options.id = ''
    }
  }

}
</script>

<style>
.background{
    padding: 10px;
  }
  .fix{
  margin-bottom: 20px;
    display:flex;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 18px;
    flex-wrap: wrap;
  }
  .driver{
  padding-bottom: 10px;
  width: 250px;
}
.dot{
  display: inline-block;
  width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    align-items: center;
    margin:2.5px;
    margin-right: 8px;
}
.dot1{
  display: inline-block;
  width: 6px;
    height: 6px;
    background: red;
    border-radius: 50%;
    align-content: center;
    margin:2.5px;
    margin-right: 8px;
}
.line{
  display: inline-block;
  font-size: 18px;
  color: #cecece;
  padding: 5px;
}

</style>
